<template>
  <div class="contentBox">
    <div class="contentLeft">
      <div class="pageTitle">商品管理</div>
      <div class="productBox">
        <div class="productTop">
          <div class="addView">已添加商品</div>
          <div class="countView">已选商品：<span>{{ productNewData.length }}种</span></div>
        </div>
        <div class="productList">
          <!-- {{ productNewData }} -->
          <div class="productItem" v-for="(item, index) in productNewData" :key="index">
            <div>{{ item.goodsName }}（{{ item.uomName }}）</div>
            <span @click="delProduct(index)">删除</span>
          </div>
        </div>
      </div>
      <div class="operateBtn">
        <div v-has-role="'product-guqing-immediately'" @click="nowClear()" v-if="navIndex == '0' || navIndex == '3'">立即估清</div>
        <div v-has-role="'product-guqing-immediately'" @click="foreverClear()" v-if="navIndex == '0' || navIndex == '3'">永久估清</div>
        <div v-has-role="'product-guqing-immediately'" @click="revClear()" v-if="navIndex == '1'">反沽清</div>
        <div v-has-role="'product-guqing-immediately'" v-if="navIndex == '0' || navIndex == '3'" @click="digitaShow = true">限量后估清</div>
        <div v-has-role="'product-shelves'" @click="grounDing()" v-if="navIndex == '2'">上架</div>
        <div v-has-role="'product-shelves'" @click="OffShelf()" v-if="navIndex == '0' || navIndex == '1' || navIndex == '3'">下架</div>
      </div>
    </div> 

    <div class="contentRight">
      <div class="contentNav">
        <div v-for="(item, index) in navList" :key="index" :class="{ navActives: index == navIndex }"
          @click="navActive(index)">{{ item }}</div>
      </div>
      <div class="content-bgf">
        <div class="navTop">
        <div class="productMenu">
          <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/product/l-arrow.png" @click="typePrev">
          <div class="typeList">
            <div v-for="(item, index) in TypePartList" :key="index" :class="{ TypeItemActive: index == typeIndex }"
              @click="getTypeInfo(item, index)">{{ item.goodsTypeName }}</div>
          </div>
          <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/product/r-arrow.png" @click="typeNext">
        </div>
        <div class="productSearch">
          <input type="text" placeholder="请输入菜名/商品简码搜索"  v-model="searchText">
          <div @click="searchBtn()">搜索</div>
        </div>
      </div>

      <div class="goodsList">
        <div class="goodsItem" v-for="(item, index) in goodsList" :key="index" @click="getGoodsDetails(item)"
          :class="{ isExists: item.isExist == true }">
          <div class="Mask" v-if="item.isEstmClear == '1' && item.state == '1'">
            <div>估清</div>
          </div>
          <div class="Mask" v-if="item.state != '1'">
            <div>已下架</div>
          </div>
          <!-- <div class="Mask" v-if="item.isExist == true">
            <div>添加商品</div>
          </div> -->
          <img class="img-jinbi" v-if="item.isUseGold == '1'" src="https://oss.jtmckj.com/wmp/qnjg/center/icon_jinbi.png" alt="">
          <!-- <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/product/vip.png" class="vip"> -->
          <div class="goodsLogo">
            <!-- 可统一封装组件 -->
            <img v-if="item.attachment" :src="item.attachment">
            <img v-else :src="PCMaterialPic">
            <div v-if="item.isLimitClear == '1'">库存：{{ item.estmClearQty }}</div>
          </div>
          <div class="goodsName">
            <span v-if="item.isPackage == '1'">套餐</span>{{ item.goodsName }}
          </div>
          <div class="goodsVipPrice">会员:￥{{ item.vipPrice }}</div>
          <div class="goodsPrice">￥<span>{{ item.salePrice }}</span></div>
        </div>
        <div class="goodsItem page" v-if="totalPages > 1">
          <div class="pageUp" :class="{ disbPages: disbPageUp == true }" @click="pageUp()">上一页</div>
          <div class="pageDown" :class="{ disbPages: disbPageDown == true }" @click="pageDown()">下一页</div>
        </div>
      </div>
      </div>
    </div>
  </div>
  <el-dialog title="操作" v-model="ReverseShow" width="15%" destroy-on-close :show-close="false" center
    style="border-radius: 10px;">
    <div
      style="padding: 10px 0; text-align: center; cursor: pointer; background-color: #E6E6E6; margin-bottom: 10px; border-radius: 10px;"
      @click="Reverse(index)">{{ ReverseState }}</div>
    <template #footer>
    </template>
  </el-dialog>
  <el-dialog v-model="digitaShow" width="25%" destroy-on-close :show-close="false" center class="menuDialog">
    <div class="digitalPanel">
      <div class="title">限量后估清</div>
      <el-input v-model="tempNum" @input="oninput('')"></el-input>
      <div class="digitalNum">
        <div class="numBtn" @click="oninput('1')">1</div>
        <div class="numBtn" @click="oninput('2')">2</div>
        <div class="numBtn" @click="oninput('3')">3</div>
        <div class="numBtn" @click="delinput(tempNum)"><img
            src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/del.png"
            style="width: 40px; height: auto;"></div>
        <div class="numBtn" @click="oninput('4')">4</div>
        <div class="numBtn" @click="oninput('5')">5</div>
        <div class="numBtn" @click="oninput('6')">6</div>
        <div class="numBtn" @click="removeinput()">删除</div>
        <div class="numBtn" @click="oninput('7')">7</div>
        <div class="numBtn" @click="oninput('8')">8</div>
        <div class="numBtn" @click="oninput('9')">9</div>
        <div class="numBtn" @click="oninput('0')">0</div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="digitaShow = false">取 消</el-button>
        <el-button style="background-color:#FF6A00;color:#FFF" @click="LimitedClear()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <LoadingSpinner :visible="GoodsGuQingFlag" />
</template>

<script setup>
import Api from '@/api'
import { getCurrentInstance } from 'vue'
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
const PCMaterialPic = configStore.shopInfo.PCMaterialPic

const ReverseShow = ref(false)
const navIndex = ref('3')
const navList = ref(['在售商品', '已估清商品', '已下架', '全部'])
const isState = ref({
  isEstmClear: '',
  state: ''
})

const digitaShow = ref(false)
const tempNum = ref('')
const oninput = (n) => {
  tempNum.value += n
  if(tempNum.value.length > 4){
    tempNum.value = tempNum.value.slice(0, -1)
    alert('数值不能大于4位数')
  }
}
const delinput = (n) => {
  tempNum.value = n.slice(0, n.length - 1)
}
const removeinput = (n) => {
  tempNum.value = ''
}

// :是否沽清 1沽清 0未沽清 ,state:是否下架 0下架 1正常销售
const navActive = (index) => {
  pageIndex.value = '1'
  navIndex.value = index
  // TypePartList.value = []
  // for(let i = 0; i < 7; i++){
  //   TypePartList.value.push(GoodsTypeList.value[i])
  // }
  // return
  if (index == '0') {
    typeIndex.value = '0'
    isState.value.isEstmClear = '0'
    isState.value.state = '1'
    productNewData.value = addedProduct1.value
    GetGoodsList(TypePartList.value[0])
  } else if (index == '1') {
    typeIndex.value = '0'
    isState.value.isEstmClear = '1'
    isState.value.state = '1'
    productNewData.value = addedProduct2.value
    GetGoodsList(TypePartList.value[0])
  } else if (index == '2') {
    typeIndex.value = '0'
    isState.value.isEstmClear = ''
    isState.value.state = '0'
    productNewData.value = addedProduct3.value
    GetGoodsList(TypePartList.value[0])
  } else if (index == '3') {
    typeIndex.value = '0'
    isState.value.isEstmClear = ''
    isState.value.state = ''
    productNewData.value = addedProduct4.value
    GetGoodsList(TypePartList.value[0])
  }
}
const goodsList = ref([])
const pageIndex = ref('1')
const disbPageDown = ref(false)
const disbPageUp = ref(false)

const totalPages = ref('')
const goodType = ref('')

const GetGoodsList = (data,goodType) => {
  console.log(data,'ddddddxxxxxxxxxxxxxxx')
  // return
  // if (data.goodsTypeName !='全部') {
  //    goodType.value = data.goodsTypeCode 
  //   } else {
  //     goodType.value = ''
  //   }
    
  let contentData = {
    goodsName: searchText.value,
    isEstmClear: isState.value.isEstmClear,
    state: isState.value.state,
    goodType:goodType,
    pageIndex: pageIndex.value,
    pageSize: "23"
    // 23
  }
  Api.Common.PcObjProcess.Do({ functionName: "GetGoodsList", contentData })
    .then(res => {
      console.log('获取商品列表res', res)
      let num1 = res.totalCount;
      let num2 = contentData.pageSize;
      totalPages.value =  Math.ceil(res.totalCount / contentData.pageSize)
      console.log(totalPages.value,'totalPages.value---------------')
      let quotient = '';
      if (num1 % num2 == 0) {
        quotient = parseInt(num1 / num2)
      } else {
        quotient = parseInt(num1 / num2) + 1
      }
      if (pageIndex.value <= 1) {
        disbPageUp.value = true
      } else { disbPageUp.value = false }
      if (pageIndex.value >= quotient) {
        disbPageDown.value = true
      } else { disbPageDown.value = false }
      if (res.data.length > 0) {
        goodsList.value = res.data
      }
      if (res.data.length == 0) {
        pageIndex.value--
      }
      if (res.data.length == 0 && pageIndex.value == 0) {
        goodsList.value = []
        pageIndex.value = 1
      }
      let a = {
        isExist: false
      }
      goodsList.value.map(e => {
        Object.assign(e, a)
      })
      if (productNewData.value) {
        productNewData.value.map(e => {
          goodsList.value.map(s => {
            if (e.goodsCode == s.goodsCode) {
              s.isExist = true
            }
          })
        })
      }
      GoodsGuQingFlag.value = false
      //预加载下一页
      // pageDownList(contentData)
    })
}
//上一页，下一页
const pageUp = () => {
  if (pageIndex.value > 1) {
    pageIndex.value--
    console.log(pageIndex.value)
    GetGoodsList(typeItem.value,typeItem.value.goodsTypeCode)
  }
}
const pageDown = () => {
  pageIndex.value++
  console.log(pageIndex.value)
  GetGoodsList(typeItem.value,typeItem.value.goodsTypeCode)
}
//商品分类列表
const GoodsTypeList = ref([])
const GetGoodsTypeOrg = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetGoodsTypeOrg", "orgCode": "0004", "contentData": "" })
    .then(res => {
      console.log(res.result)
      let tempList = [
        {
          goodsTypeCode: "",
          goodsTypeName: "全部"
        }
      ]
      tempList.push(...res.result)
      let forNum = ''
      if (tempList.length % 7 == 0) {
        forNum = tempList.length / 7
      } else {
        forNum = parseInt(tempList.length / 7) + 1
      }
      let a = 0
      let b = 0
      let c = []
      for (let fn = 0; fn < forNum; fn++) {
        a = b
        b = b + 7
        c = []
        console.log(a, b, c)
        for (let i = a; i < b; i++) {
          if (tempList[i]) {
            c.push(tempList[i])
          }
        }
        console.log(c, fn)
        // GoodsTypeList.value[fn] = c
        GoodsTypeList.value.push(c)
        console.log(GoodsTypeList.value)
      }
      TypePartList.value.push(...GoodsTypeList.value[0])
      console.log('TypePartList', TypePartList.value)
      GetGoodsList(TypePartList.value[0])
    })
}
const TypePartList = ref([])
const typeIndex = ref('0')
const TypeListIndex = ref(0)
// const typePrev = () => {
//   pageIndex.value = '1'; // 重置页面索引

//   // 先判断是否可以减小 typeIndex，避免未完成时跳过
//   if (typeIndex.value > 0) {
//     typeIndex.value--;  // 如果 typeIndex 大于 0，减少 1
//   } else {
//     // 如果 typeIndex 为 0，切换到上一个分组
//     if (TypeListIndex.value > 0) {
//       TypeListIndex.value--;  // 切换到上一个分组
//       typeIndex.value = TypePartList.value.length - 1;  // 设置 typeIndex 为上一个分组的最后一个 tab
//     } else {
//       // 如果已经是第一个分组，则跳转到最后一个分组
//       TypeListIndex.value = GoodsTypeList.value.length - 1;
//       typeIndex.value = TypePartList.value.length - 1; // 设置 typeIndex 为最后一个 tab
//     }
//   }

//   // 更新 TypePartList 为新的分组
//   TypePartList.value = GoodsTypeList.value[TypeListIndex.value];
  
//   // 获取商品列表
//   // GetGoodsList(TypePartList.value[typeIndex.value]);
//   GetGoodsList('',TypePartList.value[typeIndex.value].goodsTypeCode);
// };

// const typeNext = () => {
//   pageIndex.value = '1'; // 重置页面索引

//   // 先判断是否可以增加 typeIndex，避免未完成时跳过
//   if (typeIndex.value < TypePartList.value.length - 1) {
//     typeIndex.value++;  // 如果 typeIndex 小于 TypePartList 的长度，增加 1
//   } else {
//     // 如果 typeIndex 已经是最后一个 tab，切换到下一个分组
//     if (TypeListIndex.value < GoodsTypeList.value.length - 1) {
//       TypeListIndex.value++;  // 切换到下一个分组
//       typeIndex.value = 0;  // 重置 typeIndex 为新分组的第一个 tab
//     } else {
//       // 如果已经是最后一个分组，则跳转到第一个分组
//       TypeListIndex.value = 0;
//       typeIndex.value = 0;  // 重置 typeIndex 为第一个 tab
//     }
//   }

//   // 更新 TypePartList 为新的分组
//   TypePartList.value = GoodsTypeList.value[TypeListIndex.value];
//    console.log(TypePartList.value[typeIndex.value],'TypePartList678')
//   // 获取商品列表
//   GetGoodsList('',TypePartList.value[typeIndex.value].goodsTypeCode);
// };
const typePrev = () => {
  pageIndex.value = '1'
  typeIndex.value--
  console.log(typeIndex.value)
  console.log(TypeListIndex.value)
  if (TypeListIndex.value > 0) {
      TypeListIndex.value--
    } else {
      TypeListIndex.value = GoodsTypeList.value.length - 1
    }
    TypePartList.value = GoodsTypeList.value[TypeListIndex.value]
    // typeIndex.value = TypePartList.value.length - 1
    typeIndex.value = 0
  // if (typeIndex.value < 0) {
  //   if (TypeListIndex.value > 0) {
  //     TypeListIndex.value--
  //   } else {
  //     TypeListIndex.value = GoodsTypeList.value.length - 1
  //   }
  //   TypePartList.value = GoodsTypeList.value[TypeListIndex.value]
  //   typeIndex.value = TypePartList.value.length - 1
  // }
  // GetGoodsList(TypePartList.value[typeIndex.value])
  GetGoodsList('',TypePartList.value[typeIndex.value].goodsTypeCode);
}
const typeNext = () => {
  pageIndex.value = '1'
  // typeIndex.value++
  console.log(typeIndex.value)
  console.log(TypeListIndex.value)
  if (TypeListIndex.value < GoodsTypeList.value.length - 1) {
      TypeListIndex.value++
      TypePartList.value = GoodsTypeList.value[TypeListIndex.value]
    } else {
      TypeListIndex.value = 0
      TypePartList.value = GoodsTypeList.value[TypeListIndex.value]
    }
    typeIndex.value = 0
  // if (typeIndex.value == TypePartList.value.length) {
  //   typeIndex.value = '0'
   
  // }
  // GetGoodsList(TypePartList.value[typeIndex.value])
  GetGoodsList('',TypePartList.value[typeIndex.value].goodsTypeCode);
}
//分类信息
const typeItem = ref('')
const getTypeInfo = (item, index) => {
  goodType.value = ''
  pageIndex.value = '1'
  typeIndex.value = index
  console.log(item)
  typeItem.value = item
  // if(item.goodsTypeName =='全部') {
  //   goodType.value = ''
  // }
  GetGoodsList(typeItem.value,item.goodsTypeCode)

  
}
//商品管理汇总参数
const productNewData = ref('')
//商品详情
const addedProduct1 = ref([])
const addedProduct2 = ref([])
const addedProduct3 = ref([])
const addedProduct4 = ref([])
const getGoodsDetails = (item) => {
  // if(item.isEstmClear == 0 && item.state == 1){
  //   item.isExist = true
  // }
  item.isExist = true
  console.log(item)
  // return
  // console.log(navIndex.value)
  if (navIndex.value == '0') {
    addedProduct1.value.push(item)
    productNewData.value = ''
    productNewData.value = addedProduct1.value
  } else if (navIndex.value == '1') {
    addedProduct2.value.push(item)
    productNewData.value = ''
    productNewData.value = addedProduct2.value
  } else if (navIndex.value == '2') {
    addedProduct3.value.push(item)
    productNewData.value = ''
    productNewData.value = addedProduct3.value
  } else if (navIndex.value == '3') {
    if (item.state == '0') {
      item.isExist = false
      ReverseShow.value = true
      ReverseState.value = '上架'
      ReverseItem.value.push(item)
    } else if (item.isEstmClear == '1') {
      item.isExist = false
      ReverseShow.value = true
      ReverseState.value = '反估清'
      ReverseItem.value.push(item)
    } else {
      addedProduct4.value.push(item)
      productNewData.value = ''
      productNewData.value = addedProduct4.value
    }
  }
}
//Reverse
const ReverseState = ref('')
const ReverseItem = ref([])
const Reverse = () => {
  if (ReverseState.value == '反估清') {
    revCleard()
  } else {
    grounDingd()
  }
}
//删除估清列表
const delProduct = (index) => {
  productNewData.value[index].isExist = false
  console.log(productNewData.value[index])
  productNewData.value.splice(index, 1);
}
//立即估清
const nowClear = () => {
  GoodsGuQing('1', '1', '', productNewData.value)
}
//永久估清
const foreverClear = () => {
  GoodsGuQing('1', '2', '', productNewData.value)
}
//限量估清
const LimitedClear = () => {
  digitaShow.value = false
  GoodsGuQing('1', '3', tempNum.value, productNewData.value)
}
//反估清
const revClear = () => {
  GoodsGuQing('0', '', '', productNewData.value)
}
//下架
const OffShelf = () => {
  GoodsUpDownShelves('0', productNewData.value)
}
//上架
const grounDing = () => {
  GoodsUpDownShelves('1', productNewData.value)
}
//单独上架
const grounDingd = () => {
  ReverseShow.value = false
  GoodsUpDownShelves('1', ReverseItem.value)
}
//单独反估清
const revCleard = () => {
  ReverseShow.value = false
  GoodsGuQing('0', '', '', ReverseItem.value)
}
//上下架接口

const GoodsUpDownShelves = (state, list) => {
  let contentData = {
    state,
    goodDetails: []
  }
  list.map(e => {
    let a = { goodsCode: e.goodsCode, uomCode: e.uomCode }
    contentData.goodDetails.push(a)
  })
  GoodsGuQingFlag.value = true
  Api.Common.PcObjProcess.Do({ functionName: "GoodsUpDownShelves", contentData })
    .then(res => {
      console.log(res)
      alert(res.result)
      if (navIndex.value == '0') {
        addedProduct1.value = []
      } else if (navIndex.value == '1') {
        addedProduct2.value = []
      } else if (navIndex.value == '2') {
        addedProduct3.value = []
      } else if (navIndex.value == '3') {
        addedProduct4.value = []
      }
      productNewData.value = []
      GetGoodsList(TypePartList.value[0])
    }).catch(err=>{
      GoodsGuQingFlag.value = false
    })
}
//商品估清接口
const GoodsGuQingFlag = ref(false)
const GoodsGuQing = (state, opType, estmClearQty, list) => {
  let contentData = {
    state,
    opType,
    estmClearQty,
    goodDetails: []
  }
  list.map(e => {
    let a = { goodsCode: e.goodsCode, uomCode: e.uomCode }
    contentData.goodDetails.push(a)
  })
  GoodsGuQingFlag.value = true
  Api.Common.PcObjProcess.Do({ "functionName": "GoodsGuQing", contentData })
    .then(res => {
      console.log(res.result);
      alert(res.result)
      if (navIndex.value == '0') {
        addedProduct1.value = []
      } else if (navIndex.value == '1') {
        addedProduct2.value = []
      } else if (navIndex.value == '2') {
        addedProduct3.value = []
      } else if (navIndex.value == '3') {
        addedProduct4.value = []
      }
      productNewData.value = []
      GetGoodsList(TypePartList.value[0])
    })
    .catch(err=>{
      GoodsGuQingFlag.value = false
    })
}
//搜索
const searchText = ref('')
const searchBtn = () => {
  // typeIndex.value = '0'
  // TypePartList.value = []
  // for (let i = 0; i < 7; i++) {
  //   TypePartList.value.push(GoodsTypeList.value[i])
  // }
  GetGoodsList(TypePartList.value[typeIndex.value])
}
const onInit = () => {
  GetGoodsTypeOrg()
}
onInit()
</script>

<style scoped lang="scss">
* {
  color: #212121;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* 标准语法 */
}

.contentBox {
  display: flex;
  // align-items: center;
  justify-content: space-between;

  .contentLeft {
    width: 25%;

    .pageTitle {
      font-size: 24px;
      font-weight: bold;
      margin-top: 14px;
      margin-bottom: 36px;
    }

    .productBox {
      background-color: #fff;
      height: 600px;
      box-sizing: border-box;
      padding: 0 30px;
      border-radius: 10px;
      overflow: hidden;

      .productTop {
        display: flex;
        align-content: center;
        justify-content: space-between;
        padding-top: 15px;

        .addView {
          font-size: 20px;
          font-weight: bold;
        }

        .countView {
          font-size: 16px;

          span {
            color: #FF6A00;
          }
        }
      }

      .productList {
        padding-right: 20px;
        width: 395px;
        height: 560px;
        overflow-y: scroll;

        .productItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #F9F9F9;
          box-sizing: border-box;
          padding: 15px 20px;
          font-size: 16px;
          border-radius: 10px;
          margin: 20px 0;

          span {
            width: 40px;
            text-align: right;
            color: #00AAFF;
            cursor: pointer;
          }
        }
      }
    }

    .operateBtn {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      div {
        width: 45%;
        padding: 18px 0;
        text-align: center;
        background-color: #FFE566;
        border-radius: 8px;
        margin-top: 20px;
        font-size: 18px;
      }

      div:last-child {
        background-color: #E6E6E6;
      }
    }
  }

  .contentRight {
    width: 73.5%;
    box-sizing: border-box;
    padding-right: 40px;

    .contentNav {
      display: flex;
      align-items: center;

      div {
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #E6E6E6;
        font-size: 18px;
        color: #666666;
        padding: 18px 0;
        width: 200px;
        text-align: center;
        border-radius: 10px;
        margin-right: 20px;
      }

      .navActives {
        background-color: #FFD400;
        color: #212121;
        border-color: #FFD400;
      }
    }
    .content-bgf {
      margin-top: 20px;
      padding: 12px 10px 10px 10px;
        background-color: #fff;
        border-radius: 10px;
        min-height: 760px;
     }
    .navTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #E6E6E6;

      .productMenu {
        display: flex;
        align-items: center;
        font-size: 16px;
        width: 57%;

        img {
          width: 24px;
          height: auto;
          vertical-align: middle;
          cursor: pointer;
        }

        .typeList {
          display: flex;
          align-items: center;
          padding-left: 10px;
          width: 536px;

          div {
             font-size: 0.65vw; /* 字体大小根据视口宽度动态调整 */
            // width: 14.2857%;
            margin-right: 15px;
            text-align: center;
            cursor: pointer;
          }

          .TypeItemActive {
            color: #FF6A00;
          }
        }
      }

      .productSearch {
        width: 445px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #FFD400;
        border-radius: 30px;
        overflow: hidden;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 1px;

        input {
          width: 70%;
          box-sizing: border-box;
          padding-left: 20px;
          font-size: 16px;
        }

        div {
          margin: 1px 1px 1px 0px;
          width: 18%;
          height: 38px;
          line-height: 38px;
          font-size: 18px;
          text-align: center;
          background-color: #FFD400;
          border-radius: 30px;
          cursor: pointer;
        }
      }
    }

    .goodsList {
      display: grid;
      grid-template-columns: repeat(8, 11%);
      justify-content: space-between;
      grid-gap: 18px 0;
      padding: 20px 0px 6px 0;

      .isExists {
        background-color: #FFFBE5 !important;
        pointer-events: none;
      }

      .page {
        background-color: #fff !important;
        padding: 0 !important;
        font-size: 20px;
        cursor: auto !important;

        div {
          height: 90px;
          line-height: 90px;
          background-color: #fff;
          border-radius: 10px;
          text-align: center;
          cursor: pointer;
        }

        .pageUp {
          margin-bottom: 30px;
        }

        .disbPages {
          pointer-events: none;
          background: #f2f2f2 !important;
          color: #CCCCCC !important;
          cursor: not-allowed;
          // opacity: 0;
        }
      }

      .goodsItem {
        cursor: pointer;
        position: relative;
        background-color: #F2F2F2;
        padding: 9px;
        box-sizing: border-box;
        border-radius: 8px;
        // overflow: hidden;

        .img-jinbi {
          position: absolute;
          width: 40px;
          height: 20px;
          right: -1px;
          top: 0px;
          z-index: 20;
        }

        .Mask {
          width: 100%;
          height: 100%;
          position: absolute;
          background-color: rgba(0, 0, 0, 0.6);
          left: 0;
          top: 0;
          z-index: 10;

          div {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100%;
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-size: 24px;
            text-align: center;
            margin: auto;
          }
        }
        .Mask-add {
            background: #FFFBE5;
        } 

        .vip {
          position: absolute;
          right: 0;
          top: 0;
          width: 70px;
          height: auto;
          z-index: 9;
        }

        .goodsLogo {
          margin: auto;
          position: relative;
          border-radius: 6px;
          overflow: hidden;

          img {
            width: 100%;
            height: 105px;
            vertical-align: middle;
          }

          div {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 2px 0;
            font-size: 13px;
          }
        }

        .goodsName {
          font-size: 12px;
          line-height: 1.5;
          padding: 5px 0;
          height: 42px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;

          span {
            background-color: #FF3333;
            color: #fff;
            padding: 0 3px;
            border-radius: 3px;
            margin-right: 2px;
          }
        }

        .goodsPrice {
          font-size: 15px;
          color: #FF3333;

          span {
            color: #FF3333;
            font-size: 18px;
          }
        }

        .goodsVipPrice {
          color: #FF3333;
          font-size: 12px;
        }
      }
    }
  }
}

.digitalPanel {
  box-sizing: border-box;
  padding: 30px 20px;
  padding-bottom: 0;

  ::v-deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px transparent inset;
    background-color: #FAFAFA;
    font-size: 16px;
    border-radius: 10px;
  }

  ::v-deep(.el-input__inner) {
    color: #212121;
  }

  ::v-deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px transparent inset;
  }

  ::v-deep(.el-input) {
    height: 50px;
    margin-bottom: 30px;

    .el-input__wrapper {
      background-color: #F9F9F9;
      font-size: 18px;
    }

  }

  .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .digitalNum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .numBtn {
      width: 90px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #212121;
      font-size: 22px;
      background-color: #E6E6E6;
      margin-bottom: 20px;
      border-radius: 10px;
      cursor: pointer;
    }

    .numBtn:hover {
      background-color: #FF6A00;
      color: #fff;
    }
  }


}

.dialog-footer {
  display: block;
  padding-bottom: 30px;

  .el-button {
    width: 160px;
    height: 60px;
    font-size: 26px;
    border-color: #FF6A00;
    color: #FF6A00;
    border-radius: 10px;
  }

  .el-button:hover {
    background-color: #FF6A00;
    color: #fff;
  }

  .el-button+.el-button {
    margin-left: 30px;
  }
}
.pageDown,.pageUp {
  background: #F2F2F2 !important;
  color: #212121 !important;
}
</style>
